﻿<template>
	<div style="padding:0px;">
		<el-form :model="dialogForm"  ref="dialogForm" :rules="rules" :label-width="formLabelWidth">
			<el-tabs v-model="activeName" type="card" > 
				<el-tab-pane label="图片信息" name="first">
					<el-form-item label="上游购销合同" >
			            <qiniu v-if="qiniuImage" :qiniuImage="qiniuImage"  :id="qiniuImage.id" :canDelete="false"></qiniu>
			        </el-form-item>
			        <el-form-item label="定金凭证" >
			            <qiniu v-if="qiniuImage1" :qiniuImage="qiniuImage1"  :id="qiniuImage1.id" :canDelete="false"></qiniu>
			        </el-form-item>
			        <el-form-item label="供应商收款账号" >
			            <qiniu v-if="qiniuImage2" :qiniuImage="qiniuImage2"  :id="qiniuImage2.id" :canDelete="false"></qiniu>
			        </el-form-item>
			        <el-form-item label="提车地址及联系人"  >
			            <qiniu v-if="qiniuImage3" :qiniuImage="qiniuImage3"  :id="qiniuImage3.id" :canDelete="false"></qiniu>
			        </el-form-item>
			        <el-form-item label="付款通知书"  >
			            <qiniu  v-if="qiniuImage6" :qiniuImage="qiniuImage6" :id="qiniuImage6.id" :canDelete="dialogSendData.isAdd" :packJson="packJson"></qiniu>
			        </el-form-item>
				</el-tab-pane>
			    <el-tab-pane label="车辆信息" name="second">
			    	<el-form-item label="订单号"  class="half">
			          <el-input  v-model="dialogForm.orderNumber" auto-complete="off" disabled ></el-input>
			        </el-form-item>
			        <el-form-item label="申请时间"  class="half">
			          <el-input  v-model="dialogForm.addTime" auto-complete="off" disabled ></el-input>
			        </el-form-item>
			        
			        <el-form-item label="经销商名称"  >
			          <el-input  v-model="dialogForm.dealerInfoVO.name" auto-complete="off" disabled ></el-input>
			        </el-form-item>
			        <el-form-item label="汽车车型" >
			          <el-input  v-model="dialogForm.carBrandName" auto-complete="off" disabled ></el-input>
			        </el-form-item>
			        <el-form-item label="汽车数量"  class="half">
			          <el-input  v-model="dialogForm.amount" auto-complete="off" disabled ></el-input>
			        </el-form-item>
			        <el-form-item label="汽车颜色"  class="half">
			          <el-input  v-model="dialogForm.color" auto-complete="off" disabled ></el-input>
			        </el-form-item>
			        <el-form-item label="购车总价格"  class="currency">
			          <el-input  :value="dialogForm.totalPrice|toFixed2" auto-complete="off" disabled ></el-input>
			          <span class="convertCurrency">{{dialogForm.totalPrice|convertCurrency}}</span>
			        </el-form-item>
			        <el-form-item label="垫资金额"  class="currency">
			          <el-input  :value="dialogForm.paymentAmount|toFixed2" auto-complete="off" disabled ></el-input>
			          <span class="convertCurrency" >{{dialogForm.paymentAmount|convertCurrency}}</span>  
			        </el-form-item>
			        <el-form-item label="定金金额"  class="currency">
			          <el-input  :value="dialogForm.earnest|toFixed2" auto-complete="off" disabled 
			          ></el-input>
			          <span class="convertCurrency">{{dialogForm.earnest|convertCurrency}}</span>
			        </el-form-item>
			         <el-form-item label="保证金金额"  class="currency">
			          <el-input  :value="dialogForm.deposit|toFixed2" auto-complete="off" disabled ></el-input>
			          <span class="convertCurrency">{{dialogForm.deposit|convertCurrency}}</span>
			        </el-form-item>
			        <el-form-item label="垫资比例"  class="half" prop="earnest">
			            <el-input type="text" :value="(((dialogForm.paymentAmount-0)/(dialogForm.totalPrice-0)*100).toFixed(2))+'%'"  min="0" max="99999999" auto-complete="off" disabled></el-input>
			        </el-form-item>
                    <el-form-item label="订单状态"  class="half">
			          <el-input  v-model="dialogForm.orderStatusVO" auto-complete="off" disabled ></el-input>
			        </el-form-item>
			        <el-form-item label="指导价/配置"  >
			          <el-input  type="textarea" :rows=3 v-model="dialogForm.carConfig" auto-complete="off" disabled ></el-input>
			        </el-form-item>
			        <el-form-item label="打款备注"  >
			          <el-input  type="textarea" :rows=3 v-model="dialogForm.remark" auto-complete="off" disabled ></el-input>
			        </el-form-item>
			        <el-form-item label="审核备注"  >
			          <el-input  type="textarea" :rows=3 v-model="dialogForm.secondReviewRemark" auto-complete="off" disabled ></el-input>
			        </el-form-item>
			    </el-tab-pane>
			    <el-tab-pane label="物流验车" name="three">
				    <h4>物流信息</h4>
				    <el-form-item label="物流公司" >
				      <el-input  v-model="dialogForm.logisticsCompany.name" auto-complete="off" disabled ></el-input>
				    </el-form-item>
				  	<el-form-item label="验车司机信息" >
				      <el-input  type="textarea" :rows=3 v-model="dialogForm.logisticsInfo.driverInfo" auto-complete="off" disabled ></el-input>
				    </el-form-item>
				    <el-form-item label="提车地址(起运地)" >
				      <el-input  :value="dialogForm.supplierProvince+dialogForm.supplierCity+dialogForm.supplierAddress" auto-complete="off" disabled ></el-input>
				    </el-form-item>
				    <el-form-item label="运输目的地" >
				      <el-input  :value="(dialogForm.logisticsInfo.province||'') +(dialogForm.logisticsInfo.city||'')+(dialogForm.logisticsInfo.county||'')+(dialogForm.logisticsInfo.destination||'')"  auto-complete="off" disabled ></el-input>
				    </el-form-item>
				    <el-form-item label="物流状态" >
				      <el-input :value="dialogForm.logisticsCH" auto-complete="off" disabled ></el-input>
				    </el-form-item>
                    <h4>验车信息</h4>
				  	<el-form-item label="验车图片" >
				       <qiniu  :qiniuImage="qiniuImage8"  :id="qiniuImage8.id" :canDelete="false"></qiniu>
				    </el-form-item>
				    <el-form-item label="原车架号" >
				      <el-input  v-model="dialogForm.carInspectionInfo.oldVin" auto-complete="off" disabled ></el-input>
				    </el-form-item>
				    <el-form-item label="新车架号" >
				      <el-input  v-model="dialogForm.carInspectionInfo.vin" auto-complete="off" disabled ></el-input>
				    </el-form-item>
				    <el-form-item label="生产年月" >
				      <el-input  v-model="dialogForm.carInspectionInfo.productionDate" auto-complete="off" disabled ></el-input>
				    </el-form-item>
                    <el-form-item label="验车状态" >
				      <el-input  :value="dialogForm.carInspectionCH" auto-complete="off" disabled ></el-input>
				    </el-form-item>
				     <el-form-item label="车辆资料相关证明" >
				        <qiniu  :qiniuImage="qiniuImage7"   :id="qiniuImage7.id" :canDelete="false"></qiniu> 
				    </el-form-item>
			    </el-tab-pane>
			    <el-tab-pane label="保证金及合同" name="four">
			    	<h3>保证金信息</h3>
			        <el-form-item label="保证金金额"  >
				       <el-input  :value="dialogForm.deposit|toFixed2" auto-complete="off" disabled ></el-input>
			          <span class="convertCurrency">{{dialogForm.deposit|convertCurrency}}</span>
				    </el-form-item>
				    <el-form-item label="保证金状态"  >
				      <el-input  v-model="dialogForm.cashDepositCH" auto-complete="off" disabled> </el-input>
				    </el-form-item>
			    	<el-form-item label="保证金凭证照片"  >
				   	 <qiniu  :qiniuImage="qiniuImage9"   :id="qiniuImage9.id" :canDelete="false"></qiniu>
				    </el-form-item>
				    <el-form-item label="给资金方凭证" >
				       <qiniu  :qiniuImage="qiniuImage10"  :id="qiniuImage10.id" :canDelete="false"></qiniu>
				    </el-form-item>
				    <h3>合同信息</h3>
				    <el-form-item label="合同信息列表" >
				      <el-table :data="dialogForm.templateInfoListVO" border  >
						    <el-table-column label="合同名称" :min-width="140" >
						      <template scope="scope">
						        <span >{{ scope.row.outName }}</span>
						      </template>
						    </el-table-column>
						    <el-table-column label="合同别名" :min-width="140" >
						      <template scope="scope">
						        <span >{{ scope.row.name }}</span>
						      </template>
						    </el-table-column>
						    <el-table-column label="合同状态" :min-width="140" >
						      <template scope="scope">
						        <span >{{ scope.row.statusCH }}</span>
						      </template>
						    </el-table-column>
						</el-table>

				    </el-form-item>
			    </el-tab-pane>
			</el-tabs>
			<div style="text-align:right;margin-top:15px;">
				 <el-button @click="returnBack">返 回</el-button>
				 <el-button  v-if="dialogSendData.isAdd" type="primary" @click="submitConfirmForm('dialogForm')">提 交</el-button>
			</div>
		</el-form>
	</div>
</template>

<script>
    import qiniu from '@/views/qiniu/upload'
    import agentHttp from '@/utils/agentHttp.js'
	export default{
		components:{qiniu},
		created(){		
			if(this.dialogSendData.id!==""){
	      	  this.queryAuditOrderInfo();
	      	}
        },
        
        updated(){
        },
		props:['dialogSendData','tableData'],
		data(){
			return{
				activeName:"first",
				formLabelWidth:'170px',
				//弹窗或者查看页面信息
		         dialogForm:{
		         templateInfoListVO:[],
		         activityTheme:"",
		         linkUrl:"",
		         logisticsInfo:{},
		         dealerInfoVO:{},
		         status:[],
		         orderAuditResults:{},
		         orderRepayment:{},
		         cashDepositInfo:{},
		         carInspectionInfo:{},
		         logisticsCompany:{},
		         imagUrl:[],
				 imagUrl1:[],
				 imagUrl2:[],
				 imagUrl3:[],
				 imagUrl6:[],
				 imagUrl7:[],
				 imagUrl8:[],
				 imagUrl9:[],
				 imagUrl10:[]	
		         
		        },
		        //验证规则
		        rules: {
		        },
                //七牛图片上传
		        qiniuImage:{
		        	id:"qiniuImage",  
		        	image_uri:[]    
		        },
		        qiniuImage1:{
		        	id:"qiniuImage1",  
		        	image_uri:[]    
		        },
		        qiniuImage2:{
		        	id:"qiniuImage2",  
		        	image_uri:[]    
		        },
		        qiniuImage3:{
		        	id:"qiniuImage3",  
		        	image_uri:[]    
		        },
		        qiniuImage6:{
		        	id:"qiniuImage6",  
		        	image_uri:[]    
		        },
		         qiniuImage7:{
			        	id:"qiniuImage7",    
			        	image_uri:[]
			        },
			     qiniuImage8:{
			        	id:"qiniuImage8",    
			        	image_uri:[]
			        },
			     qiniuImage9:{
			        	id:"qiniuImage9",    
			        	image_uri:[]
			        },
			     qiniuImage10:{
			        	id:"qiniuImage10",    
			        	image_uri:[]
			        },
		        packJson:{
					maxLength:3,   //最大图片数量
					accept:"",//image/gif,image/jpeg,image/jpg,image/png如果是这些，可以不传此参数
					size:4    //图片大小  单位兆
				}
			}
		},methods:{
			returnBack(){
				this.dialogSendData.dialogFormVisible=false;
			},
			submitConfirmForm(formName){
                this.$refs[formName].validate((valid) => {
		          if (valid) {
		          	if(this.dialogSendData.id===""){
		          	
		          	}else{
		      	         this.update();
		          	}
		          	
		          } else {
		            this.$nextTick(()=>{
		          		this.$message.warning(document.getElementsByClassName('el-form-item__error')[0].innerText||"提交失败");
		                return false;
		          	})
		          }
		        });
			},
			update(){
		        if (this.setImageUrl()) {
                agentHttp.postJson('adminApi/admin/car_order/funder_audit_order/temporary_submit',this.dialogForm).then((data)=>{
		            if(data.success){  
		            	this.$emit('refreshTableData');
		             this.$message.success(data.data||"修改成功");
		            	setTimeout(()=>{
	            		this.dialogSendData.dialogFormVisible=false;
	            	 },500)
		            	
		            } 
		        }) 
		        }
			},
			  setImageUrl(){
               	this.dialogForm.orderAuditResults.paymentNoticePic=this.qiniuImage6.image_uri.join(",");
               	if(this.dialogForm.orderAuditResults.paymentNoticePic.length<1){
               		this.$message.warning('付款通知书图片至少一张');
		            return false;
		        }
		         return true;
              },
			//获取订单数据
		    queryAuditOrderInfo(){  
			  agentHttp.get('adminApi/admin/car_order/funder_audit_order/view/'+this.dialogSendData.id).then((data)=>{
		            if(data.success){  
		              this.dialogForm =  data.data;  
		              if(this.dialogForm.orderAuditResults == null){
		              	 this.dialogForm.orderAuditResults = {}; 
		              }else{
		            	this.dialogForm.orderAuditResults.carInformationPic?this.qiniuImage7.image_uri=this.dialogForm.orderAuditResults.carInformationPic.split(',').notempty():"";
		            	this.dialogForm.orderAuditResults.paymentNoticePic?this.qiniuImage6.image_uri= this.dialogForm.orderAuditResults.paymentNoticePic.split(',').notempty():"";
		              }     
		              if (this.dialogForm.logisticsInfo==null) {
		              	this.dialogForm.logisticsInfo={};
		              }
		              if (this.dialogForm.logisticsCompany==null) {
		              	this.dialogForm.logisticsCompany={};
		              }
		              if (this.dialogForm.carInspectionInfo==null) {
		              	this.dialogForm.carInspectionInfo={};
		              }else{
		              	this.dialogForm.carInspectionInfo.pic?this.qiniuImage8.image_uri=this.dialogForm.carInspectionInfo.pic.split(',').notempty():"";
		              }
		              if (this.dialogForm.cashDepositInfo==null) {
		              	this.dialogForm.cashDepositInfo={};
		              }else{
		              		this.dialogForm.cashDepositInfo.voucherPic?this.qiniuImage9.image_uri=this.dialogForm.cashDepositInfo.voucherPic.split(',').notempty():"";
		              		this.dialogForm.cashDepositInfo.dealerRemittanceImag?this.qiniuImage10.image_uri=this.dialogForm.cashDepositInfo.dealerRemittanceImag.split(',').notempty():"";
		              }
		              if (this.dialogForm.dealerInfoVO==null) {
		              	this.dialogForm.dealerInfoVO={};
		              }
		              if (this.dialogForm.orderRepayment==null) {
		              	  this.dialogForm.orderRepayment={};
		              }


		             
		              //加载图片
		                this.dialogForm.contracts?this.qiniuImage.image_uri= this.dialogForm.contracts.split(',').notempty():"";
		            	this.dialogForm.depositPic?this.qiniuImage1.image_uri= this.dialogForm.depositPic.split(',').notempty():"";
		            	this.dialogForm.supplierInfoPic?this.qiniuImage2.image_uri= this.dialogForm.supplierInfoPic.split(',').notempty():"";
		            	this.dialogForm.supplierAddressPic?this.qiniuImage3.image_uri= this.dialogForm.supplierAddressPic.split(',').notempty():"";
		            	
		            	if (this.dialogForm.status==140) {
		            		this.dialogForm.check=true;
		            	}else{
		            		this.dialogForm.check=false;
		            	}
		            	
		            } 
		        })
		    	 
		    },
		   

		}
	}
</script>
